import React from 'react';
import { connect, useModel } from 'umi';
import { message } from 'antd';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { MobileOutlined, MailOutlined } from '@ant-design/icons';
import { WaterMark } from '@ant-design/pro-layout';

const Index = (props) => {
    const { dispatch, auth, history } = props
    const { user, signin } = useModel('auth')
    // const { initialState, setInitialState } = useModel('@@initialState');

    if (user.authorized || auth.authorized) {
        // setInitialState({
        //     ...initialState,
        //     user,
        // })
        history.push('/')
    }

    return (
        <WaterMark content="DEMO" zIndex={-1}>
            <div
                style={{
                    height: '100vh',
                }}
            >
                <ProCard
                    style={{
                        maxWidth: 460,
                        margin: 'auto',
                        position: 'relative',
                        top: 210
                    }}
                    bordered
                    hoverable
                >
                    <ProForm
                        onFinish={async (values) => {
                            values.domain = "anxinyun"
                            //范式的简易数据管理方案（部分场景可以取代 dva），通常用于中台项目的全局共享数据
                            // signin(values)
                            //Dva
                            dispatch({
                                type: 'auth/login',
                                payload: values
                            })
                        }}
                        submitter={{
                            searchConfig: {
                                submitText: '登录',
                            },
                            render: (_, dom) => dom.pop(),
                            submitButtonProps: {
                                size: 'large',
                                style: {
                                    width: '100%',
                                },
                            },
                        }}
                    >
                        <h1 style={{ textAlign: 'center', }} >
                            <img
                                style={{
                                    height: '44px',
                                    marginRight: 16,
                                }}
                                alt="logo"
                                src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
                            />
                        AnxinCloud4.0
                    </h1>
                        <div style={{
                            marginTop: 12,
                            textAlign: 'center',
                            marginBottom: 40,
                        }} >
                            基于 Umi 创建的前端 Demo
                    </div>
                        <ProFormText
                            fieldProps={{
                                size: 'large',
                                prefix: <MobileOutlined />,
                            }}
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号!',
                                },
                            ]}
                        />
                        <ProFormText.Password
                            fieldProps={{
                                size: 'large',
                                prefix: <MailOutlined />,
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                            name="password"
                        />
                    </ProForm>
                </ProCard>
            </div>
        </WaterMark>
    )
}

// export default Index;

export default connect(state => {
    const { auth } = state
    return {
        auth
    }
})(Index);